<!--
 * @Descripttion: 预约list
 * @version: 
 * @Author: lihk
 * @Date: 2023-12-28 15:50:10
 * @LastEditors: lihk
 * @LastEditTime: 2024-01-08 12:19:44
-->
<template>
  <view class="content">
    <LfHeader title="我的预约"></LfHeader>
    <view class="professor-container" v-for="item,index in orderList" @click="toChat(item,index)">
      <view>
        <img :src="item.order_headUrl" alt="">
      </view>
      <view class="item-container">
        <span>{{item.order_name}}</span>
        <view class="desc">
          预约时间：{{item.date}} {{filterTime(item.timeId)}}
        </view>
      </view>
    </view>
    <LfConfirmPopup title='还未到预约时间，是否取消预约' :visible="popupVisible" @close="handlePopupClose" @confirm='cancelOrder' position="center">
    </LfConfirmPopup>
  </view>
</template>

<script>
import { delOrder, getProfessorList, myOrder } from '../../utils/http';
import { timeList } from '../json/time'
export default {
  data () {
    return {
      professorList: [],
      orderList: [],
      params: {},
      popupVisible: false,
      cancleId: null,
      times: { 1: ['9:00', '12:00',], 2: ['13:00', '18:00'] }
    };
  },
  created () {
    this.params = this.$route.query
    this.getProfessor()
  },
  methods: {
    // 判断当前的时间戳是不是在时间段内
    isTime (item) {
      console.log("🚀 ~ file: myOrder.vue:48 ~ isTime ~ item:", item)
      const startTime = item.date + ' ' + this.times[item.timeId][0]
      const endTime = item.date + ' ' + this.times[item.timeId][1]
      // 指定的时间范围
      const startTimestamp = new Date(startTime).getTime();
      const endTimestamp = new Date(endTime).getTime();
      // 当前时间戳
      const timestampToCheck = Date.now();
      return timestampToCheck >= startTimestamp && timestampToCheck <= endTimestamp;
    },
    filterTime (timeId) {
      const res = timeList.find(item => item.id === timeId)
      return res.time
    },
    async getOrder () {
      let { data } = await myOrder(this.params.userId)
      // 获取当天的日期和小时，进行过滤超过上午的预约
      const currentDate = new Date();
      const currentDay = currentDate.toISOString().split('T')[0];
      const currentHour = currentDate.getHours();
      data = data.filter(item => {
        const professor = this.professorList.find(ele => ele.id === item.professorId);
        if (professor) {
          item.order_headUrl = professor.headUrl;
          item.order_name = professor.name;
        }
        if (currentHour >= 12) {
          return (currentDay === item.date && item.timeId === 2) || currentDay !== item.date
        }
        return true
      });
      this.orderList = data
      console.log("🚀 ~ file: orderList.vue:51 ~ getOrder ~ data:", data)
    },
    async getProfessor () {
      const { data } = await getProfessorList()
      data.forEach(element => {
        element.tags = JSON.parse(element.tags)
      });
      this.professorList = data
      console.log("🚀 ~ file: diagnose.vue:19 ~ getProfessor ~ data:", data)
      this.getOrder()
    },
    toChat (item, index) {
      const { id, professorId } = item;
      const { userId } = this.$route.query;
      this.cancleId = id
      if (!this.isTime(item)) {
        this.popupVisible = true;
      } else {
        uni.navigateTo({
          url: `/pages/chat/chat?professorId=${professorId}&userId=${userId}`
        });
      }
    },
    async cancelOrder () {
      const { data } = await delOrder(this.cancleId)
      this.getProfessor()
      this.handlePopupClose()
    },
    handlePopupClose () {
      this.popupVisible = false
      this.cancleId = null
    }
  }
}
</script>

<style lang="scss">
.professor-container {
  margin: 0 15px;
  margin-top: 10px;
  padding: 10px 15px;
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .item-container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 10px;
    // 超出两行隐藏显示省略号
    .desc {
      font-size: 13px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
    }
  }
}
</style>
